<template>
	<view class="wrap">
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="true" :bgImage="getQyStaticFilePath('navBg.png')" >
			<block slot="content"></block>
		</custom-nav-sq-xcx>
		<create-qy-head :headImgFlag="true" :hasPaddFlag="false">
			<hl-scrollTopSticky :sticky="true" class="refresh-list-view" @init="mescrollInit" @down="downCallback" :up="upOption">
				<view class="xmContent" :style="{height: topHeight+'px', overflow:'hidden'}">
					<view class="innerWrap">
						<view class="ttfwName ellip">发多少就过分的离开过家</view>
						<view class="padd">
							<view class="xmInfo">
								<view class="xmName">第一节 心理健康系列</view>
								<view class="xmSmInfo">发布时间：2024-05-20 15:20-20</view>
								<view class="xmSmInfo">服务讲师：<text>李三利</text><text>李三利1</text></view>
								<view class="xmSmInfo">组织方：<text>濮阳市心理咨询师协会</text></view>
								<view class="xmSmInfo otherCol">服务对象：100人</view>
							</view>
							<view class="detModTit">
								<text class="iconfont icon-qyMenu"></text>
								<text>服务方向</text>
							</view>
							<view class="xmIntro">反倒是来看广泛的交流高科技的的时间了科技股放到沙发上官方打工来看多久发的睡觉了分开家说份的给大家立发的说说广泛的交流K歌换个房间联合开发计划刻感觉到发的睡觉了分开的时间发了过分的</view>
							<view class="detModTit">
								<text class="iconfont icon-qyMenu"></text>
								<text>测评详情</text>
							</view>
							<view class="cpBasicInfo">
								<view class="basicItem">
									<view class="comFont">12</view>
									<view>题目数量</view>
								</view>
								<view class="basicItem">
									<view><text class="comFont">30</text>min</view>
									<view>测评时间</view>
								</view>
								<view class="basicItem">
									<view class="comFont">12256</view>
									<view>测评人数</view>
								</view>
							</view>
							<view class="cpContent">
								<view class="conTit">测评简介</view>
								<view class="content">份都是垃圾辜负大家立刻赶到给否定了可根据放到手机里疯狂的就是广泛的管理会计发多少积分绿色科技发广泛的两个快递就</view>
								<view class="conTit">注意事项</view>
								<view class="content">份都是垃圾辜负大家立法大师傅十分刻赶到给否定了可根据放到手机里疯狂的就是广泛的管理会计发多少积分绿色科技发广泛的两个快递就</view>
								<view class="conTit">测评须知</view>
								<view class="content">
									<view class="margB">1.请认真测评,每道题的测评时间至少为1秒,如若做题过快,系统将判断本次测评无效。</view>
									<view class="margB spec">2.测评对象：员工</view>
									<view class="margB spec">3.测评对象团体：濮阳心理咨询师协会</view>
									<view class="margB spec">4.测评人数共计：100人</view>
									<view class="margB spec">5.请于2024-05-25前完成测评</view>
									<!-- <view class="margB spec" v-if="cpDet.reportTag == 1">6.测评完可查看测评报告</view> -->
								</view>
							</view>
							<view class="detModTit">
								<text class="iconfont icon-qyMenu"></text>
								<text>评论</text>
							</view>
						</view>
					</view>
				</view>
				<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
				<view class="plTabs" :style="{top:navHeight + 'px'}">
					<pl-tab :tabIndex="tabIndex" :plTabArr="plTabArr" @switchPlTab="switchPlTab"></pl-tab>
				</view>
				<!-- 数据列表 -->
				<swiper :style="{height: swiperHeight}" :current="tabIndex" @change="swiperChange">
					<swiper-item v-for="(tab,i) in plTabArr" :key="i">
						<good-list ref="mescrollItem" :i="i" :index="tabIndex" :tabs="plTabArr" :height="swiperHeight" :disable-scroll="disableScroll"></good-list>
					</swiper-item>
				</swiper>
			</hl-scrollTopSticky>
		</create-qy-head>
		<view class="pubPl alignCen otherPos">
			<text class="iconfont icon-qqPubPl"></text>
			<text>评论</text>
		</view>
		<view class="btnGroupBot">
			<button class="comBtn qy" :disabled="btnDisabFlag">立即测评</button>
		</view>
	</view>
</template>

<script>
	import CreateQyHead from '../../subQyMine/createQy/components/CreateQyHead.vue'
	import PlTab from './components/PlTab.vue'
	//import PlList from './components/PlList.vue'
	import goodList from './pageview/goodList.vue'
	const app = getApp();
	export default {
		components:{
			CreateQyHead,
			PlTab,
			//PlList
			goodList
		},
		data(){
			return{
				mescroll: null ,//mescroll实例对象,
				upOption:{
					use: false // 主体框架只启用下拉刷新
				},
				topHeight:0,
				swiperHeight: "",
				//plTabArr:[{id:1,name:'组织方'},{id:2,name:'讲师'}],
				plTabArr:[{name:'全部'}, {name:'奶粉'}, {name:'图书'}],
				tabIndex: 0,
				disableScroll: true ,// swiper列表是否禁止滚动
				btnDisabFlag:false,
				navHeight:app.globalData.navHeight
			}
		},
		watch: {
			tabIndex(i) {
				if(this.disableScroll){
					this.disableScroll = false
					this.$nextTick(()=>{
						let mescroll = this.getMescroll(i)
						mescroll && mescroll.scrollTo(0,0)
						setTimeout(()=>{
							this.disableScroll = true
						},300)
					})
				}
			}
		},
		onLoad(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().select('.innerWrap').boundingClientRect(data => {
					console.log(data.height)
					this.topHeight = data.height + uni.upx2px(20);
				}).exec()
			})
			// 需要固定swiper的高度 (需减去悬浮tabs的高度60rpx)
			this.swiperHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(60) - this.navHeight  +  'px'
			// 需要固定swiper的高度 (需减去悬浮tabs的高度60rpx)
			//this.swiperHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(60) - uni.upx2px(420) + 'px'
		},
		mounted() {
			// #ifdef H5
			uni.pageScrollTo({scrollTop: 0,duration: 0}) // 刷新浏览器,重置滚动条
			// #endif
		},
		
		//注册系统自带的下拉刷新
		onPullDownRefresh(){
			this.mescroll && this.mescroll.onPullDownRefresh();
		},
		//注册列表滚动事件,用于判定在顶部可下拉刷新
		onPageScroll(e) {
			this.mescroll && this.mescroll.onPageScroll(e);
		},
		//注册滚动到底部的事件,用于上拉加载 
		onReachBottom() {
			this.mescroll && this.mescroll.onReachBottom();
		},
		methods:{
			switchPlTab(index){
				this.tabIndex = index;
			},
			downCallback() {
				this.mescroll.endSuccess()
			},
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			// 获取指定下标的mescroll对象
			getMescroll(i){
				let mescrollItems = this.$refs.mescrollItem;
				if(mescrollItems){
					let item = mescrollItems[i]
					if(item) return item.mescroll
				}
				return null
			},
			// 页面的滚动事件
			onPageScroll(e){
				//console.log("scrollTop=" + Math.ceil(e.scrollTop))
				//console.log('topHeight=' + this.topHeight)
				this.disableScroll = Math.ceil(e.scrollTop) < (this.topHeight-1 )
				//console.log(this.disableScroll )
				
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
		}
	}
</script>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	@import "@/static/scss/qyXmDet.scss";
	.wrap{
		padding-bottom: 140rpx;
	}
	.comCpBg{
		background: $pss-qy-gray;
		border-radius: 12rpx;
	}
	.cpBasicInfo{
		display: flex;
		@extend .comCpBg;
		padding: 20rpx 0rpx;
		margin-bottom: 20rpx;
		.basicItem{
			flex: 1;
			text-align: center;
			font-size: 24rpx;
			color: $qy-main6;
			view:first-child{
				color: $pss-qy-main;
				margin-bottom: 5rpx;
			}
			.comFont{
				font-family: $sqFontSta;
				font-size: 32rpx;
			}
		}
	}
	.cpContent{
		@extend .comCpBg;
		padding: 0 20rpx 20rpx;
		.conTit{
			font-size: 32rpx;
			color: $pss-qy-main;
			font-weight: 600;
			padding: 30rpx 0 20rpx;
		}
		.content{
			font-size: 28rpx;
			color: $qy-main2;
			.margB{
				margin-bottom: 10rpx;
				&.spec{
					color: $pss-qy-warn;
				}
			}
		}
	}
</style>